'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReTab = require('./ReTab.jsx');
var HkfsProductDetailMessage = require('../../components/pc/HkfsProductDetailMessage.jsx');
var HomeProductContent = require('../../components/pc/HkfsHomeProductTable/HomeProductContent.jsx');
var Pager = require('../../components/pc/pager.jsx');
var actions = require('../../actions/productDetail');

class HkfsProductDetail extends React.Component {
    constructor(props) {
        super(props);
        this.createMarkup = this.createMarkup.bind(this);
        this.changePage = this.changePage.bind(this);
    }

    createMarkup(content) {
        return {__html: content};
    };

    changePage(current) {
        this.props.dispatch(actions.getListByParId(this.props.parMessage.parId, 10, current));

    }

    render() {
        let widthArray = ['30%', '15%', '10%', '15%', '15%', '15%'];
        let itemTitle = ['产品名称', '目标收益', '期限', '可投金额', '进度', '操作'];
        let itemTypes = ['string', 'largeRed', 'string', 'string', 'process', 'button'];
        return (
            <div className="HkfsProductDetailContainer">
                <div className="HkfsProductDetailContent">
                    <HkfsProductDetailMessage data={this.props.parMessage}></HkfsProductDetailMessage>

                    <div className="HkfsProductDetail_Product">
                        <ReTab itemWidth="150px" reClass="HkfsProductDetailTab">
                            <div reTabTitle="所有子产品">
                                <HomeProductContent
                                    data={this.props.parProduct.product} widthArray={widthArray}
                                    title={itemTitle}
                                    itemTypes={itemTypes}
                                    buttonText="立即购买"></HomeProductContent>
                                <div className="PagerDiv">
                                    <Pager page={this.props.parProduct.current} totalPage={this.props.parProduct.size}
                                           onChangePage={this.changePage}/>
                                </div>
                            </div>
                            <div reTabTitle="产品介绍">
                                <div className="HkfsProductDescriptionContent">
                                    <div dangerouslySetInnerHTML={this.createMarkup(this.props.parMessage.proDesc)}></div>
                                </div>
                            </div>
                        </ReTab>
                    </div>
                </div>


            </div>);
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.productDetail);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsProductDetail);

